var userIdmessage = document.getElementById('userIdmessage')
var useId=userIdmessage.innerHTML;
// 封装获取元素的方法
function getType(selector){
    return selector.substring(0,1)=='.'?document.getElementsByClassName(selector.substring(1)):document.getElementById(selector.substring(1));
}
var test = window.location.href;
var numberId=test.split('?')[1]
console.log(numberId);


// 判断网页是否加载完毕
document.onreadystatechange = function () {      
    if(document.readyState=="complete") {            
        document.getElementsByClassName('loading')[0].style.display='none';      
    }     
} 

// 根据电视剧id查询电视剧和链接
function showEpisode(){
    axios({
        url: '/video/tv/findTVMsgByTVId',
        method: 'get',
        params:{
            tvId:numberId
        }
    })
    .then(function(data){
        // console.log(data.data.data)
        // 收藏数
        getType('.collectNum')[0].innerHTML=data.data.data.collections
        //  点赞数
        getType('.praiseNum')[0].innerHTML=data.data.data.thumbsUp
        // 热度数
        getType('.desc-i')[0].innerHTML=`<i class='iconfont icon-redu'></i>${data.data.data.doh}`
        // 电视剧名称
        getType('.play-top')[0].innerHTML='';
        getType('.play-top')[0].innerHTML=`
            <h2>${data.data.data.videoName}</h2>
        `
        getType('.howH')[0].innerHTML=''
        getType('.howH')[0].innerHTML=`
            <img src="/publics/front-stage/img/VIP@2x.png" alt="">
            ${data.data.data.videoName}  
        `
        getType('.summary')[0].innerHTML=''
        getType('.summary')[0].innerHTML=`
            ${data.data.data.introduction}
        `
        // 电视剧更新到那集或者电视剧的总集数
        console.log(data.data.data.tvNumber)
        getType('.first-span')[0].innerHTML=''
        getType('.first-span')[0].innerHTML=data.data.data.tvNumber;
        // 遍历出来相关的演员
        console.log(51)
        console.log(data.data.data.actorList)
        getType('.trochanter-ul')[0].innerHTML=' ';
        var string='';
        if(data.data.data.actorList.length==0){
            getType('.touch')[0].style.display='none'
        }else{
            for(let i=0;i<data.data.data.actorList.length;i++){
                string+=`
                <li class='star-box'>
                    <div class='star-index'>
                        <a href="/actorIntroduce?${data.data.data.actorList[i].actorId}" class='star-a'>
                            <img src="/publics/front-stage/img/star1.jpg" alt="">
                            <div class='hide-ico'>
                                <span class='subtitle'>${data.data.data.actorList[i].actorName}</span>
                            </div>
                        </a>
                    </div>
                </li>
                `
                getType('.trochanter-ul')[0].innerHTML=string;
                getType('.star-box')[0].className='star-box active2';
            }
        }
       
        let rev='';
        var VideoSrc=[];
        // 如果不是电视剧就让集数消失以及不出现下一集了吧
        if(data.data.data.linksList==0){
            getType('.page-list')[0].style.display='none';
            getType('.hhhh')[0].style.display='none';
            getType('#next').style.display='none';
            getType('#video').src=`${data.data.data.videoPath}`  
            getType('.all-time')[0].innerHTML= data.data.data.videoTime;
        }else{
            for(let i=0;i<data.data.data.linksList.length;i++){
                getType('.episode')[0].innerHTML=''
                rev += `
                    <a class='episode-a'>
                        <div class='current-code'>
                            <span class='num-col'>${data.data.data.linksList[i].setNumber}</span> 
                        </div>
                    </a>
                `
                getType('.episode')[0].innerHTML=rev;
                VideoSrc.push(data.data.data.linksList[i].src) 
                // getType('.smallAd')[0].style.display='none';
                // getType('#video').style.display='block'
                // var dashboard = document.getElementsByClassName('player-dashboard')[0];
                // getType('.block-left')[0].onmouseover=function(){
                //     dashboard.style.visibility='visible';
                // }
                // getType('.block-left')[0].onmouseout=function(){
                //     dashboard.style.visibility='visible';
                // }
                getType('#video').src=`${VideoSrc[0]}`
                getType('.episode-a')[0].innerHTML=`
                    <div class='current-code active4'>
                        <span class='num-col'>1</span>
                        <div class='bounce'>
                            <ul>
                                <li></li>
                                <li></li>
                                <li></li>
                            </ul>
                        </div>
                    </div>
                `
                 // 默认的时候还没点击的时候集数是第一集   下一集
                 var g=0;
                 getType('#next').onclick=function(){
                    g++;
                    axios({
                        url: '/tv/lastTvSrcByNowSetNumber',
                        method: 'get',
                        params:{
                            tvId:numberId,
                            nowSetNumber:g
                        }
                    })
                    .then(function(data){
                        for(let j=0;j<getType('.episode-a').length;j++){
                            getType('#video').src=""
                            getType('.episode-a')[j].innerHTML=`
                                <div class='current-code '>
                                    <span class='num-col'>${j+1}</span>
                                </div>
                            `   
                        }
                        getType('#video').src=`${data.data.data}`
                        if(g<getType('.episode-a').length){
                            getType('.episode-a')[g].innerHTML=`
                            <div class='current-code active4'>
                                <span class='num-col'>${g+1}</span>
                                <div class='bounce'>
                                    <ul>
                                        <li></li>
                                        <li></li>
                                        <li></li>
                                    </ul>
                                </div>
                            </div>
                        `  
                        }else{
                            alert('呀，最后一集')
                            getType('#video').src=`${data.data.data}`
                            getType('.episode-a')[g].innerHTML=`
                            <div class='current-code active4'>
                                <span class='num-col'>${g+1}</span>
                                <div class='bounce'>
                                    <ul>
                                        <li></li>
                                        <li></li>
                                        <li></li>
                                    </ul>
                                </div>
                            </div>
                        `  
                        }
                       
                    })
                    .catch(function(error){
                        console.log('错误')
                    })   
                }
                //点击某一集数会跳到那个集数
                for(let j=0;j<getType('.episode-a').length;j++){
                    getType('.episode-a')[j].onclick=function(){
                        for(let j=0;j<getType('.episode-a').length;j++){
                            getType('#video').src=""
                            getType('.episode-a')[j].innerHTML=`
                                <div class='current-code '>
                                    <span class='num-col'>${j+1}</span>
                                </div>
                            `   
                        }
                        getType('#video').src=`${VideoSrc[j]}`
                        getType('.episode-a')[j].innerHTML=`
                            <div class='current-code active4'>
                                <span class='num-col'>${j+1}</span>
                                <div class='bounce'>
                                    <ul>
                                        <li></li>
                                        <li></li>
                                        <li></li>
                                    </ul>
                                </div>
                            </div>
                        ` 
                        if(getType('.current-code')[j].className=='current-code active4'){
                            m=j;
                            // 下一集
                            getType('#next').onclick=function(){
                                m++;
                                axios({
                                    url: '/tv/lastTvSrcByNowSetNumber',
                                    method: 'get',
                                    params:{
                                        tvId:numberId,
                                        nowSetNumber:m
                                    }
                                })
                                .then(function(data){
                                    for(let t=0;t<getType('.episode-a').length;t++){
                                        
                                        getType('.episode-a')[t].innerHTML=`
                                            <div class='current-code '>
                                                <span class='num-col'>${t+1}</span>
                                            </div>
                                        `   
                                    }
                                    getType('#video').src=`${data.data.data}`
                                    if(m<getType('.episode-a').length){
                                        getType('.episode-a')[m].innerHTML=`
                                        <div class='current-code active4'>
                                            <span class='num-col'>${m+1}</span>
                                            <div class='bounce'>
                                                <ul>
                                                    <li></li>
                                                    <li></li>
                                                    <li></li>
                                                </ul>
                                            </div>
                                        </div>
                                    `  
                                    }else{
                                        alert('呀，最后一集')
                                        getType('#video').src=`${data.data.data}`
                                        getType('.episode-a')[g].innerHTML=`
                                        <div class='current-code active4'>
                                            <span class='num-col'>${g+1}</span>
                                            <div class='bounce'>
                                                <ul>
                                                    <li></li>
                                                    <li></li>
                                                    <li></li>
                                                </ul>
                                            </div>
                                        </div>
                                    `  
                                    }
                                })
                                .catch(function(error){
                                    console.log('错误')
                                })   
                            }
                        }
                    }   
                }
               
            }
        }
       
        
    })
    .catch(function(error){
        console.log('错误')
    })
}
// 会显示一个广告
function showAd(){
    axios({
        url: '/advertisement/findAllAdver',
        method: 'get',
    })
    .then(function(data){
        // 进入页面会产生一个随机广告
        // var indexMath=Math.floor((Math.random()*arr.length))
        // console.log(data.data.data[indexMath])
        getType('#videoAd').innerHTML=`
        <source src="${data.data.data[0].advertisementPath}" class='adSource'>
        `
        getType('.advertising')[0].innerHTML=' ';
        getType('.advertising')[0].innerHTML=
            `还有<span class="second">${data.data.data[0].advertisementTimeLength}</span>s广告结束`
        var i =getType('.second')[0].innerHTML;
        var time=setInterval(function fun(){
                if(i<=0){
                    clearInterval(time);			//倒计时为0之后停止倒计时
                    getType('.ad-box')[0].style.display="none";	//隐藏box1
                    getType('#videoAd').style.display='none'
                    getType('#video').style.display='block'
                    var dashboard = document.getElementsByClassName('player-dashboard')[0];
                    getType('.block-left')[0].onmouseover=function(){
                        dashboard.style.visibility='visible';
                    }
                    getType('.block-left')[0].onmouseout=function(){
                        dashboard.style.visibility='visible';
                    }
                }
                getType('.second')[0].innerHTML=i--;
        },1000)
    })
    .catch(function(error){
        console.log('错误')
    })
}
// showEpisode()
// 遍历用户信息
function showInfo(){
    axios({
        url: '/user/findUserById',
        method: 'get',
        params:{
            userId:useId,
        }
    })
    .then(function(data){
        if(data.data.data.object.vip==1||data.data.data.object.vip==2){
            getType('.smallAd')[0].style.display='none';
            getType('#video').style.display='block';
            var dashboard = document.getElementsByClassName('player-dashboard')[0];
            getType('.block-left')[0].onmouseover=function(){
                dashboard.style.visibility='visible';
            }
            getType('.block-left')[0].onmouseout=function(){
                dashboard.style.visibility='visible';
            }
            // 集数会出现
            showEpisode()
        }else{
            showEpisode();
            showAd()
        }''
    })
    .catch(function(error){
        console.log('错误')
    })
}

//广告
// 进入页面登录之后判断是否是vip用户
if(useId==''){
    showEpisode();
    showAd()
}else{
    showInfo(); 
}

// 根据videoid获取到他的相关演员
 function showActor(){
    axios({
        url: '/actor/findAllActorsByVideoId',
        method: 'get',
        params:{
            videoId:numberId,
        }
    })
    .then(function(data){
        getType('.trochanter-ul')[0].innerHTML=' ';
        var string='';
        if(data.data.data.length==0){
            getType('.touch')[0].style.display='none'
        }else{
            for(let i=0;i<data.data.data.length;i++){
                string+=`
                <li class='star-box'>
                    <div class='star-index'>
                        <a href="/actorIntroduce?${data.data.data[i].actorId}" class='star-a'>
                            <img src="/publics/front-stage/img/star1.jpg" alt="">
                            <div class='hide-ico'>
                                <span class='subtitle'>${data.data.data[i].actorName}</span>
                            </div>
                        </a>
                    </div>
                </li>
                `
                getType('.trochanter-ul')[0].innerHTML=string;
                getType('.star-box')[0].className='star-box active2';
                // getType('.star-box')[i].onmouseover=function(){
                //     getType('.star-box')[i].onmouseover=function(){
                //         for(let j=0;j<getType('.star-box').length;j++){
                //             getType('.star-box')[j].className='star-box';
                //         }  
                //         getType('.star-box')[i].className='star-box active2';
                //     }
                // }
                // for(let t=0;t<getType('.star-box').length;t++){
                  
                
                //     getElementTop('.star-box ')[t].onmouseout=function(){
                //         for(let j=0;j<getType('.star-box').length;j++){
                //             getType('.star-box')[j].className='star-box';
                //         }  
                //         getType('.star-box activer2')[0].className='star-box';
                //     }
                // }
            }
        }
    })
    .catch(function(error){
        console.log('错误')
    })
}
// showActor();

// 遍历出来8个电视剧
function tele(){
    // 返回一个promise对象
    return new Promise((resolve, reject) => {
      axios({
        url: '/index/MoreTV',
        method: 'get',
      })
      .then((res) => { 
        resolve(res.data.data);
      })
      .catch(function (error) {
        reject(error);
      });
    });
}
// async function showTele(){
//     let a=await tele();
//     var trl=document.getElementsByClassName('trl-ul')[0];
//     console.log(a)
//     console.log(403)
    
//     for(var i=0;i<7;i++){
//       trl.innerHTML+=`
//         <li class="trl-item">
//             <a class="rank-list" href='/play?${a[i].videoId}'>
//                 <div class='rank-num'>${i+1}</div>
//                 <div class="rank-content">
//                     <span class='rush'>${a[i].videoName}</span>
//                     <p style="overflow: hidden;white-space:nowrap;text-overflow: ellipsis;font-size:13px;">${a[i].videoBriefly}</p>
//                 </div>
//             </a>
//         </li>
//       `
//     }
//     var rank1=document.getElementsByClassName('rank-num');
//     rank1[0].style.color='#ff473a';
//     rank1[1].style.color='#f73'
//     rank1[2].style.color='#ffa82e'
// //                                                                                                                                                                                                                                                                                                                                                                                    ].style.color='#ffa82e'
// }
// showTele();



// 下载该视频
function load(path){
    var road=path.parentNode.parentNode.parentNode.children[0].children[1].src;
    var VIDEO=path.parentNode.parentNode.parentNode.children[0].children[1].src
    // axios({
    //     url: '/videoDownLoad',
    //     method: 'get',
    //     params:{
    //         filePath:'D:/videoLoad',
    //         url:road,
    //         videoId:16
    //     }
    // })
    // .then(function(data){
    //     alert('下载成功')
    //     // console.log('下载成功')
    // })
    // .catch(function(error){
    //     console.log('错误')
    // })
}
// 鼠标放到左边视频上的时候会出现一些操作
// hide()
// 1.点击按钮的时候会播放歌曲
var timer;
var ifPlay = false;
function setPlay(){
    if(ifPlay === false){
        getType('#video').play();//点击播放
        getType('#toggle').className = 'iconfont icon-zanting';
        timer=setInterval(ProgressTime,1000);
        getType('.pause')[0].style.display='none';
        ifPlay = true;
    }else{
        getType('#toggle').className = 'iconfont icon-ai23';
        getType('#video').pause();//点击暂停
        getType('.pause')[0].style.display='block';
        // 点击x广告消失
        getType('.pause-close')[0].onclick=function(){
            getType('.pause')[0].style.display='none';
        }
        clearInterval(timer)
        ifPlay = false;
    }
}

// 视频播放完毕之后会进行的操作
getType('#video').onended = function(){
    getType('#toggle').className = 'iconfont icon-ai23';
};
// 2.进度条
function ProgressTime(){
    var n=getType('#video').currentTime/getType('#video').duration;
    getType('.iconfont icon-yuandian')[0].style.marginLeft=~~(n*getType('.bar')[0].offsetWidth)+'px';
    // getType('.barProgress')[0].style.width=n*getType('.bar')[0].offsetWidth+'px';
    getType('.progress-bar')[0].style.width=n*getType('.bar')[0].offsetWidth+'px';
}
ProgressTime();

// 3.拖拽进度条
getType('.icon-yuandian')[0].onmousedown=function(e){//鼠标按下
        document.onmousemove=function(e){//鼠标移动
            //x表示小圆点相对于浏览器窗口左上角为原点定位x距离
            var x=e.clientX;
            // a表示进度条的长度
            var a=x-getType('.icon-yuandian')[0].offsetParent.offsetLeft-getType('.icon-yuandian')[0].offsetWidth/2;
            // console.log(getType('.icon-yuandian')[0].offsetParent.offsetLeft);//281    281
            // console.log(getType('.icon-yuandian')[0].offsetWidth/2);//17.5    17.5
            // console.log(a);//110.5;(129.5)
            getType('.icon-yuandian')[0].style.marginLeft=a+'px';
            // getType('.barProgress')[0].style.width=a+'px';

            getType('.progress-bar')[0].style.width=a+'px';
            var b=parseInt(getComputedStyle(getType('.icon-yuandian')[0]).marginLeft)/getType('.icon-yuandian')[0].offsetWidth;
            // console.log(getType('.icon-yuandian')[0].marginLeft);//undefined
            var c=b*getType('#video').duration;
            getType('#video').currentTime=c;
            ProgressTime();
        }
        // 鼠标移出之后小圆点不再移动
        document.onmouseup=function(){
            this.onmousedown=null;
            this.onmousemove=null;
        }
       
}
// 找到子元素在父元素中的相对位置
function getElementTop(element){
    var el = (typeof element == "string") ? document.getElementById(element) : element;
    if (el.parentNode === null || el.style.display == 'none') {
        return false;
    }
    return el.offsetTop - el.parentNode.offsetTop;
}


// 4.音量大小
var all=getType('.controls-right')[0];
var rate=getType('.planRate')[0];//进度%
var volumeBar=getType('#volume-bar');
var box=getType('#box');
var boxL,newL,moveL,mouseX,left;
var cha=volumeBar.offsetWidth-box.offsetWidth;
var indexes=0;
var evt=new Event("change");
box.style.left=cha+'px'
initial();
function initial(){
    box.addEventListener("mousedown",mouseDownclickHandler);
    document.addEventListener("mousemove",mouseMoveclickHandler)
    document.addEventListener("mouseup",mouseUpclickHandler);
    document.addEventListener("change",changeHandler);
    volumeBar.addEventListener("click",clickHandler);
}
function mouseDownclickHandler(e) {
    indexes=1;
    boxL=box.offsetLeft;//56
    mouseX=e.clientX;//鼠标按下拖动的位置
}
function mouseMoveclickHandler(e) {
    if(indexes===1){
        moveL=e.clientX-mouseX;//鼠标移动
        newL=boxL+moveL;//left值
        //判断最小值与最大值
        if(newL<0){
            newL = 0;
        }
        if(newL>=cha){
            newL=cha;
        }
        // 改变left值
        box.style.left = newL + 'px';
        // 计算比例
        var bili = newL / cha * 100;
        rate.textContent = Math.ceil(bili) + '%';
        evt.elem=this;//当前指向 对象
        document.dispatchEvent(evt);//朝谁发送 抛发
        var vol=(newL/cha).toFixed(1);
        getType('#video').volume=vol;
    }
}
function mouseUpclickHandler(e) {
    indexes=0;
    evt.elem=this;//当前指向 对象
    document.dispatchEvent(evt);//朝谁发送 抛发
    // 鼠标移出之后小圆点不再移动
    document.onmousedown=null;
    document.onmousemove=null;
   
}
function clickHandler(e) {
    left = e.clientX-all.offsetLeft-box.offsetWidth/2;
    if(left<0){
        left=0;
    }
    if(left>=cha){
        left=cha;
    }
    box.style.left=left+'px';
    bili=left/cha*100;
    rate.innerHTML=Math.ceil(bili)+'%';
    evt.elem=this;//当前指向 对象
    document.dispatchEvent(evt);//朝谁发送 抛发
}
function changeHandler(e) {
    // console.log(e);
}


getType('#video').addEventListener('timeupdate',function(){
    var now=parseInt(this.currentTime);
        var temp=now;
        minute=parseInt(temp/60);
        if(now<10){
            getType('.change-time')[0].innerHTML=""+"00"+":0"+now+"";
        }else if(now<60){
            getType('.change-time')[0].innerHTML=""+"00"+":"+now+"";
        }
        else{
            if(now%60<10){
                getType('.change-time')[0].innerHTML=""+"0"+minute+":0"+now%60+"";
            }else{
                getType('.change-time')[0].innerHTML=minute+":"+now%60+"";
            }
        }
        // console.log('秒' + temp)

},false);


//5. 点击出现倍速
var rate1 = document.getElementsByClassName('rate-board')[0];
var rateItem = document.getElementsByClassName('rate-item');
var control = document.getElementsByClassName('control-icon')[0];
var speed = document.getElementsByClassName('speed')[0]
 control.onclick=function(){
     if(rate1.style.display=='none'){
        rate1.style.display='block'; 
        for(let i=0;i<rateItem.length;i++){
            rateItem[i].onclick=function(){
                for(let r=0;r<rateItem.length;r++){
                    rateItem[r].className='rate-item';
                }
                getType('#video').playbackRate=this.innerHTML;
                rateItem[i].className='rate-item active';
               
                if(this.innerHTML==1){
                    speed.innerHTML='倍速';
                }else{
                    speed.innerHTML=this.innerHTML
                }
                
            }
        } 
     }else{
        rate1.style.display='none';
     }   
}
           
// 6.点击进行全屏
var fullscreen = false;
var button1=document.getElementsByClassName('control-icon')[2];
var fullarea = document.getElementsByClassName('play-flash')[0];
button1.addEventListener('click',function(){   
    if (fullscreen) {       // 退出全屏
        getType('.icon-quanping')[0].className = 'iconfont icon-quanping1';
        if (document.exitFullscreen) {
            document.exitFullscreen();
        }
         else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
        }
        else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } 
        else if (document.msExitFullscreen) {
            document.msExitFullscreen();
        }

    } else {        // 进入全屏
        getType('.icon-quanping1')[0].className = 'iconfont icon-quanping';
        if (fullarea.requestFullscreen) {
            fullarea.requestFullscreen();
        }
        else if (fullarea.webkitRequestFullScreen) {
            fullarea.webkitRequestFullScreen();
        }
        else if (fullarea.mozRequestFullScreen) {
            fullarea.mozRequestFullScreen();
        }
        else if (fullarea.msRequestFullscreen) {
            fullarea.msRequestFullscreen();
        }

    }
    fullscreen = !fullscreen;
})
